<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="日期">
          <a-date-picker  popup-container="html" 
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择日期"
            class="bacClass"
          />至
          <a-date-picker  popup-container="html" 
            v-model="query.enginDate"
            :style="{ width: '180px' }"
            placeholder="选择日期"
            class="bacClass"
          />
        </a-form-item>
        <CorporateSectorCascader
          :configCascader="configCascader"
          @changeCascader="changeCascader"
        />
        <!-- <a-form-item label="厂区" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.planOrderCode" />
          </a-form-item> -->
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '85%', padding: '10px' }">
      <div style="width: 100%; height: 40%">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          style="height: 100%"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="tableDataList"
          :columnDefs="tc"
          :localeText="localeText1"
        >
        </AgGridVuesCopys>
      </div>
      <div :style="{ height: '60%', padding: '10px', width: '100%' }">
        <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </div>
    <!-- <div :style="{ height: '42%', padding: '10px' }">
            <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
        </div> -->
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)

  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
  }

  interface Querin {
    beginDate: any
    enginDate: any
    planOrderCode: any
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY-MM-DD'), //当月日期
    enginDate: dayjs().format('YYYY-MM-DD'), //当月日期
    planOrderCode: null,
  })

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
  }

  const tc = [
    {
      headerName: '织厂单位',
      field: 'firm',
      width: 150,
      cellRenderer: {
        template: `
            <a-space :style="{width:'100%',height:'100%',textAlign:'center'}" @click='clicks'>
                <a-tag v-if="a" class="tagCss">{{a}}</a-tag>
            </a-space>
            `,
        setup(props: any) {
          const a = ref(props.params.data.firm)
          const clicks = () => {
            tubiaos(props.params.data)
          }
          return {
            clicks,
            a,
          }
        },
      },
    },
    {
      headerName: '统计开始时间',
      field: 'queryStart',
      width: 150,
    },
    {
      headerName: '统计结束时间',
      field: 'queryEnd',
      width: 150,
    },
    {
      headerName: '产量（吨）',
      field: 'yieldNumber',
      width: 150,
    },
    {
      headerName: '产值（元）',
      field: 'outputValue',
      width: 150,
    },
    {
      headerName: '值机计件工资',
      field: 'dutyWages',
      width: 150,
    },
    {
      headerName: '查布计件工资',
      field: 'perchingWages',
      width: 150,
    },
    {
      headerName: '机修计件工资',
      field: 'adjustWages',
      width: 150,
    },
    {
      headerName: '搬运计件工资',
      field: 'carryWages',
      width: 150,
    },
    {
      headerName: '拆纱计件工资',
      field: 'disassembleWages',
      width: 150,
    },
    {
      headerName: '当日福利',
      field: 'welfareWages',
      width: 150,
    },
    {
      headerName: '一线岗位工资',
      field: 'totalWages',
      width: 150,
    },
    {
      headerName: '产值工资率（%）',
      field: 'outputWageRate',
      width: 150,
      cellRenderer: {
        template: `<span>{{val}}%</span>`,
        setup(props: any) {
          return {
            val: props.params.data.outputWageRate,
          }
        },
      },
    },
    // {
    //     headerName: '原因分析',
    //     field: 'orderCrossRate',
    //     width: 150
    // },
  ]
  const option = ref({
    title: {
      text: '产值工资率',
      /*textVerticalAlign:'center'*/
      top: '2%',
      left: '45%',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['本集团订单准交率', '外加工订单准交率', '厂部订单准交率'],
      top: '5%',
      right: '5%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %',
      },
    },
    series: [
      {
        name: '',
        type: 'line',
        data: [42, 41, 45, 46, 42, 41, 40, 43, 46, 42, 44, 39],
        label: { formatter: '{c}%', show: true, position: 'top', distance: 10 },
        symbolSize: 15,
        lineStyle: {
          width: 8,
        },
      },
      {
        name: '标准值',
        type: 'line',
        data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
        label: { formatter: '{c}%', color: 'red', show: true, position: 'top', distance: 10 },
        symbolSize: 15,
        lineStyle: {
          color: 'red',
          width: 8,
        },
      },
    ],
  })

  //初始化
  onMounted(async () => {
    selectJt()
  })
  const myChart: any = ref()
  const states = () => {
    return echarts.init(myChart.value!)
  }

  function selectJt() {
    post({
      url: 'qms/report/outputWageReport',
      data: {
        // "firmId": query.planOrderCode, //公司ID
        firmId: query.planOrderCode, //公司ID
        dateStart: query.beginDate,
        dateEnd: query.enginDate,
      },
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data
        // const state = states()
        // option.value.legend.data =Array.from(new Set(res.data.map((e:any)=>{
        //     return e.firm
        // })))
        // option.value.series[0].data = res.data.map((e:any)=>{
        //     return e.bOrderCrossRate
        // })
        // option.value.series[1].data = res.data.map((e:any)=>{
        //     return e.wOrderCrossRate
        // })
        // option.value.series[2].data = res.data.map((e:any)=>{
        //     return e.orderCrossRate
        // })
        // state.setOption(option.value)
      } else {
        Message.error(res.message)
      }
    })
  }

  const getList = () => {
    selectJt()
  }

  const tubiaos = (vvv: any) => {
    post({
      url: 'qms/report/outputWageReportByDay',
      data: {
        firmId: vvv.firmId, //公司ID
        dateStart: query.beginDate,
        dateEnd: query.enginDate,
      },
    }).then((res: any) => {
      const state = states()
      option.value.legend.data = [`${vvv.firm}产值工资率`, '标准值']
      option.value.series[0].name = `${vvv.firm}产值工资率`
      option.value.series[0].data = res.data.map((www: any) => {
        return www.outputWageRate
      })
      option.value.xAxis.data = res.data.map((qqq: any) => {
        return qqq.dateDay
      })
      option.value.series[1].name = '标准值'
      option.value.series[1].data = res.data.map((www: any) => {
        return 40
      })
      state.setOption(option.value)
    })
  }
</script>
<style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
